<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '用户登录',
  },
}
</route>
<template>
  <view class="login-container">
    <!-- 标题 -->
    <text class="title">欢迎来到酒水商城</text>

    <!-- 登录方式切换 -->
    <view class="tab-container">
      <text :class="['tab-item', activeTab === 'code' && 'active']" @click="activeTab = 'code'">
        验证码登录
      </text>
      <text
        :class="['tab-item', activeTab === 'account' && 'active']"
        @click="activeTab = 'account'"
      >
        邮箱登录
      </text>
    </view>

    <!-- 邮箱登录表单 -->
    <view v-if="activeTab === 'account'" class="form-container">
      <input
        class="input-field"
        placeholder="请输入邮箱"
        placeholder-class="placeholder"
        v-model="email"
      />
      <input
        class="input-field"
        placeholder="请输入密码"
        placeholder-class="placeholder"
        password
        v-model="password"
      />
      <!-- 添加协议勾选 -->
      <view class="protocol-container">
        <view
          class="checkbox-icon"
          :class="{ checked: agreeProtocol }"
          @click="agreeProtocol = !agreeProtocol"
        >
          <text v-if="agreeProtocol" class="icon-check">✓</text>
        </view>
        <text class="protocol-text">
          已阅读并同意
          <text class="link" @click="navigateToProtocol('user')">《用户协议》</text>
          和
          <text class="link" @click="navigateToProtocol('privacy')">《隐私政策》</text>
        </text>
      </view>

      <button class="login-btn" @click="handlePwdLogin">立即登录</button>
    </view>

    <!-- 验证码登录表单 -->
    <view v-else class="form-container">
      <input
        class="input-field"
        placeholder="请输入邮箱"
        placeholder-class="placeholder"
        v-model="email"
      />
      <view class="code-input-container">
        <input
          class="input-field code-input"
          placeholder="请输入验证码"
          placeholder-class="placeholder"
          v-model="code"
        />
        <wd-button
          :class="['code-btn', isCounting && 'disabled']"
          @click="sendCode"
          :disabled="isCounting"
        >
          {{ codeBtnText }}
        </wd-button>
      </view>
      <!-- 添加协议勾选 -->
      <view class="protocol-container">
        <view
          class="checkbox-icon"
          :class="{ checked: agreeProtocol }"
          @click="agreeProtocol = !agreeProtocol"
        >
          <text v-if="agreeProtocol" class="icon-check">✓</text>
        </view>
        <text class="protocol-text">
          已阅读并同意
          <text class="link" @click="navigateToProtocol('user')">《用户协议》</text>
          和
          <text class="link" @click="navigateToProtocol('privacy')">《隐私政策》</text>
        </text>
      </view>
      <wd-button block class="login-btn" @click="handleCodeLogin" :loading="isLoading">
        立即登录
      </wd-button>
    </view>

    <!-- 注册链接 -->
    <view class="footer">
      <text class="register-text" @click="navigateToRegister">没有账号？立即注册</text>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { getEmailCode, login } from '@/service/auth/index'
import { useUserStore } from '@/store/user'
import { useToast } from 'wot-design-uni'

const toast = useToast()
const userStore = useUserStore()
const activeTab = ref<'account' | 'code'>('code')
const email = ref('cjm200244@163.com')
const password = ref('Cjm123456') // Cjm123456
const code = ref('')
const countdown = ref(0)
const timer = ref<number | null>(null)
const isLoading = ref(false)

const isCounting = computed(() => countdown.value > 0)
const codeBtnText = computed(() => (isCounting.value ? `${countdown.value}s后重发` : '获取验证码'))

const sendCode = async () => {
  if (!email.value) {
    toast.show('请输入邮箱')
    return
  }

  try {
    toast.loading('发送中')
    const codeFlag = await getEmailCode(email.value)
    toast.close()
    console.log(codeFlag)

    if (codeFlag) {
      toast.success('验证码已发送')
    }
  } catch (error) {
    toast.error('验证码发送失败')
  }

  countdown.value = 60
  timer.value = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--
    } else if (timer.value) {
      clearInterval(timer.value)
    }
  }, 1000)
}

const agreeProtocol = ref(false)

const navigateToProtocol = (type: 'user' | 'privacy') => {
  const url = type === 'user' ? '/pages/protocol/user' : '/pages/protocol/privacy'
  uni.navigateTo({ url })
}

// 在handleLogin和handleCodeLogin方法中添加协议校验
const handlePwdLogin = async () => {
  if (!agreeProtocol.value) {
    toast.show('请先阅读并同意协议')
  }
  // TODO: 实现邮箱登录逻辑
  try {
    toast.loading('加载中...')
    isLoading.value = true
    const { data } = await login({ email: email.value, password: password.value })
    isLoading.value = false
    toast.close()
    console.log('data', data)
    if (data.token) {
      toast.success('登录成功')
      console.log(data)
      userStore.setToken(data.token)
      await userStore.getUserInfo()

      loginSuccess()
    }
    console.log('登录', data)
  } catch (error) {
    toast.error('登录异常')
    isLoading.value = false
  }
}

const handleCodeLogin = async () => {
  if (!agreeProtocol.value) {
    toast.show('请先阅读并同意协议')
    return
  }
  try {
    const { data } = await login({ email: email.value, smsCode: code.value })
    console.log('data', data)
    if (data.token) {
      toast.success('登录成功')
      console.log(data)
      userStore.setToken(data.token)
      await userStore.getUserInfo()

      loginSuccess()
    }
    console.log('登录', data)
  } catch (error) {
    toast.error('登录异常')
  }
}

const loginSuccess = () => {
  uni.switchTab({ url: '/pages/index/index' })
}
const navigateToRegister = () => {
  uni.navigateTo({ url: '/pages/register/index' })
}
</script>

<style lang="scss" scoped>
.login-container {
  min-height: calc(100vh - 250rpx);
  padding: 80rpx 60rpx;
  background: #ffffff;

  .title {
    display: block;
    margin-bottom: 80rpx;
    font-size: 48rpx;
    font-weight: 600;
    color: #333;
  }
  .tab-container {
    display: flex;
    margin-bottom: 60rpx;
    border-bottom: 2rpx solid #eee;

    .tab-item {
      flex: 1;
      padding: 20rpx 0;
      font-size: 34rpx;
      color: #666;
      text-align: center;
      border-bottom: 1rpx solid #fff;
      box-shadow: inset 0 -2rpx 0 0 #eee; /* 初始阴影 */
      transition: all 0.3s;
      &.active {
        color: #ff5f15;
        border-bottom: 1rpx solid #ff5f15;
        // box-shadow: inset 0 -4rpx 0 0 #ff5f15; /* 激活状态的阴影 */
      }
    }
  }

  .form-container {
    .input-field {
      height: 100rpx;
      padding: 0 30rpx;
      margin-bottom: 40rpx;
      font-size: 30rpx;
      background: #f8f8f8;
      border-radius: 12rpx;
      transition: all 0.3s;

      &:focus {
        background: #fff;
        border: 2rpx solid #ff5f15;
      }
    }

    .code-input-container {
      display: flex;
      gap: 20rpx;
      margin-bottom: 40rpx;

      .code-input {
        flex: 1;
      }

      .code-btn {
        width: 200rpx;
        height: 100rpx;
        font-size: 28rpx;
        line-height: 100rpx;
        color: white;
        text-align: center;
        background: #ff5f15;
        border-radius: 12rpx;

        &.disabled {
          cursor: not-allowed;
          background: #ccc;
        }
      }
    }

    .login-btn {
      height: 90rpx;
      margin-top: 60rpx;
      font-size: 34rpx;
      line-height: 90rpx;
      color: white;
      background: linear-gradient(90deg, #ff7900, #ff5f15);
      border-radius: 50rpx;
    }
  }

  .footer {
    margin-top: 80rpx;
    text-align: center;

    .register-text {
      color: #ff5f15;
      text-decoration: underline;
    }
  }

  .placeholder {
    color: #999;
  }
}
.protocol-container {
  display: flex;
  align-items: center;
  margin: 40rpx 0;
  font-size: 24rpx;
  color: #666;

  .checkbox-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32rpx;
    height: 32rpx;
    margin-right: 16rpx;
    border: 2rpx solid #ccc;
    border-radius: 6rpx;

    &.checked {
      background-color: #ff5f15;
      border-color: #ff5f15;
    }

    .icon-check {
      font-size: 24rpx;
      color: white;
      transform: translateY(-2rpx);
    }
  }

  .link {
    color: #ff5f15;
    text-decoration: none;
  }
}
</style>
